<template>
  <div id="AMapContainer" class="AMapContainer"></div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { getDeviceList } from "@/api/deviceManage/deviceManage";
window._AMapSecurityConfig = {
  securityJsCode: "2c55a5dc8b4d1f10962e9497919074c8", // '「申请的安全密钥」',
};
export default {
  data() {
    return {
      map: null,
      //标记点的位置信息
      mapData: [
        // {
        //   name: "万全小区",
        //   longitude: 108.387428,
        //   latitude: 30.760283,
        //   content: "室内羽毛球馆，全新地皮，干净整洁",
        //   address: "7幢",
        //   deviceId: "D345654555",
        //   status: "在线",
        //   captureNum: 234,
        //   abnormalAlarm: 35
        // },
        // {
        //   name: "万全小区",
        //   longitude: 108.387487,
        //   latitude: 30.759655,
        //   content: "好吃是好吃，吃完必上火，把子肉嘎嘎香",
        //   position: "温馨布艺（万全小区店）",
        //   deviceCode: "D345654555",
        //   status: "在线",
        //   captureNum: 234,
        //   abnormalAlarm: 35
        // }
      ],
    };
  },
  created() {
    // 获取设备列表
    this.getDeviceList();
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initAMap();
  },
  methods: {
    changeStyle() {
      let type = localStorage.style;
      if (type === "dark") {
        this.map.setMapStyle("amap://styles/darkblue");
      } else {
        this.map.setMapStyle("amap://styles/normal");
      }
    },
    initAMap() {
      AMapLoader.load({
        key: "dde5dce82d918a57d572c3c1ad489ff2", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.Scale",
          "AMap.ToolBar",
          "AMap.ControlBar",
          "AMap.Geocoder",
          "AMap.Marker",
          "AMap.CitySearch",
          "AMap.Geolocation",
          "AMap.AutoComplete",
          "AMap.InfoWindow",
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          let options = {
            //设置地图容器id
            resizeEnable: true,
            viewMode: "3D", // 使用3D视图
            zoomEnable: true, // 地图是否可缩放，默认值为true
            dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
            doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
            zoom: 18, //初始化地图级别
            showBuildingBlock: true, // 是否出现建筑模型
            // mapStyle: "amap://styles/darkblue",
            center: [108.386738, 30.758895],
            pitch: 30, // 视角控制 地图俯仰角度，有效范围 0 度- 83 度
          };
          if (localStorage.style === "dark") {
            options.mapStyle = "amap://styles/darkblue";
          }
          // 获取到作为地图容器的DOM元素，创建地图实例
          this.map = new AMap.Map("AMapContainer", options);
          var singleHole = [
            [
              [108.386863, 30.756935],
              [108.385963, 30.757225],
              [108.385832, 30.757361],
              [108.386521, 30.760462],
              [108.386698, 30.760587],
              [108.387678, 30.760487],
              [108.387628, 30.759506],
              [108.387528, 30.759043],
              [108.386872, 30.759161],
              [108.386608, 30.757785],
              [108.387151, 30.757685],
            ],
          ];
          this.addPloygon(singleHole, AMap);
          this.markPoints(AMap);
          this.latitude();
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 绘制多边形
    addPloygon(data, AMap) {
      let polygon = new AMap.Polygon({
        path: data,
        fillColor: "#af36b3",
        strokeOpacity: 1,
        fillOpacity: 0.5,
        strokeColor: "#2b8cbe",
        strokeWeight: 1,
        strokeStyle: "dashed",
        strokeDasharray: [5, 5],
      });
      polygon.on("mouseover", () => {
        polygon.setOptions({
          fillOpacity: 0.7,
          fillColor: "#7bccc4",
        });
      });
      polygon.on("mouseout", () => {
        polygon.setOptions({
          fillOpacity: 0.5,
          fillColor: "#af36b3",
        });
      });
      this.map.add(polygon);
    },
    //遍历显示标记点
    markPoints(AMap) {
      this.mapData.forEach((item) => {
        // 创建一个 Marker 实例：
        // const marker = new AMap.Marker({
        //   position: new AMap.LngLat(item.longitude, item.latitude) // 经纬度对象，也可以是经纬度构成的一维数组[lng, lat]
        // })
        // // 将创建的点标记添加到已有的地图实例：
        // this.map.add(marker)
        // //给标记点添加事件
        // marker.on("click", (e) => {
        //   this.setInfoWindows(e, item, AMap)
        // })
        // marker.emit("click", { target: marker })
      });
    },
    //显示的弹出框组件
    setInfoWindows(e, item, AMap) {
      console.log(item);
      // 信息窗体的内容

      let content = [
        // e.pos[0],e.pos[1],
        `<div style="width: 300px;height: 208px;">`,
        `<div style="color: #01C2FF;font-size: 16px;font-weight: bold;margin-left:17px;margin-top: 0px;">${item.name}</div>`,
        `<div style="color: #A8D6FF;font-size: 14px;font-weight: 350;margin-left:30px;margin-top: -5px;">设备地址 : ${item.position}</div>`,
        `<div style="color: #A8D6FF;font-size: 14px;font-weight: 350;margin-left:30px;margin-top: -10px;">设备ID : ${item.deviceCode}</div>`,
        `<div style="color: #A8D6FF;font-size: 14px;font-weight: 350;margin-left:30px;margin-top: -10px;">报警总量 : ${item.captureNum}</div>`,
        // `<div style="color: #A8D6FF;font-size: 14px;font-weight: 350;margin-left:30px;margin-top: -10px;">异常报警 : ${item.abnormalAlarm}</div>`,
        `<div style="width:93px; height: 40px; line-height: 40px; color: #01c2ff; font-size: 14px;background: rgba(10, 26, 52, 0.6); border: 1px solid rgba(89, 175, 249, 0.7049);box-shadow: inset 0px 0px 5px 0.5px rgba(3, 251, 255, 0.6513);text-align: center;border-radius: 36px;margin-left: 191px;margin-top: -10px;margin-bottom: -10px;">${item.status}</div>`,
        `</div>`,
      ];
      // 创建 infoWindow 实例
      let infoWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(0, -30),
        content: content.join("<br>"), //传入 dom 对象，或者 html 字符串
      });
      // 打开信息窗体
      let dd = this.map.getCenter();
      // dd.pos = [e.pos[0], e.pos[1]]
      dd.lat = item.latitude;
      dd.lng = item.longitude;
      console.log(dd);
      infoWindow.open(this.map, dd);
    },
    //点击获取经纬度
    latitude() {
      this.map.on("click", function (ev) {
        // console.log(ev)
        // 触发事件的对象
        let target = ev.target;
        // 触发事件的地理坐标，AMap.LngLat 类型
        let lnglat = ev.lnglat;
        // 触发事件的像素坐标，AMap.Pixel 类型
        let pixel = ev.pixel;
        // 触发事件类型
        let type = ev.type;
        console.log(target, lnglat, pixel, type);
      });
    },
    // 获取设备列表
    getDeviceList() {
      getDeviceList({
        keyword: "",
        page: 1,
        pageSize: 100,
      }).then((res) => {
        let list = res.data.data.map((item) => {
          let hardware = {};
          if (item.hardware.length > 0) {
            hardware = JSON.parse(item.hardware);
          }
          console.log(hardware);
          return {
            ...item,
            status: item.status === 1 ? "在线" : "离线",
          };
        });
        this.mapData = list;
      });
    },
  },
};
</script>
<style scoped lang="scss">
.AMapContainer {
  width: 1920px;
  height: 1080px;
  background-color: transparent;
  position: absolute;
}
.content-box {
  color: #030d18;
}
::v-deep {
  .amap-info-content {
    background: #0a1a34;
    border: 2px solid #48f6f0;
    box-shadow: inset 0px 1px 15px 0px rgba(3, 251, 255, 0.6);
    padding: 0px;
  }
  .bottom-center .amap-info-sharp {
    border-top: 8px solid #48f6f0;
    bottom: 1px;
  }
}
</style>
